<template>
  <div class="bottom_chart_boxes" ref="jingji">
  </div>
</template>
  
<script>
import * as echarts from 'echarts'
export default {
  props: ['data', 'sum'],
  data() {
    return {
      xData: this.$props.data.map(item => item.name),
      yData: this.$props.data.map(item => item.value)
    }
  },
  methods: {
    initJingJiChart() {
      const myBottomChartDom = this.$refs.jingji
      const myBottomChart = echarts.init(myBottomChartDom)
      const option = {
        backgroundColor: "rgb(235, 246, 253)",
        title: [
          {
            text: `${this.sum}{sub|亿元}`,
            left: '14%',
            top: '35%',
            textStyle: {
              color: 'red',
              fontSize: 26,
              fontWeight:900,
              rich:{
                sub:{
                  fontSize:14,
                  fontWeight:900,
                }
              },
            },
            textAlign:'center',
            subtext:'总投资规模',
            subtextStyle:{
              fontSize:18,
              fontWeight:900,
              color:'#000',
            }
          },
          {
            text: '单位:亿元',
            right: '10%',
            top: '7%',
            textStyle: {
              color: 'rgb(39, 96, 152)',
              fontSize: 14,
              fontWeight: 'normal',
            },
          },
          {
            text: '分行业项目投资规模(前5)',
            right: '30%',
            top: '4%',
            textStyle: {
              color: 'rgb(39, 96, 152)',
              fontSize: 15,
              fontWeight: 900,
            },
          },
        ],
        grid: {
          top: '20%',
          left: '30%',
          right: '20%',
          bottom: '0%',
          containLabel: true
        },
        legend: {
          show: false
        },
        tooltip: {
          show: false,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          max:this.yData.reduce((acc, cur) => acc + cur, 0),
          show: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          }
        },
        yAxis: [
          {
            type: 'category',
            data: this.xData,
            inverse: true,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false
            }
          },
          {
            data: this.yData,
            offset: 20,
            position: "right",
            inverse: true,
            type: 'category',
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            // 右边字体样式
            axisLabel: {
              margin: 0,
              interval: 0,
              inside: true,
              padding: [0, 0, -9, 0],
              color: 'rgb(39, 96, 152)',
              fontSize: 16,
              // fontWeight:900,
              align: 'left',
              verticalAlign: 'bottom',
              formatter: function (value, index) {
                return value
              }
            }
          }
        ],
        series: [
          {
            z: 10,
            type: 'bar',
            barWidth: 12,
            data: this.yData,
            // silent: true,
            showBackground: true,
            itemStyle: {
              borderRadius: 12,
              color: {
                type: 'linear',
                x: 1, // 右
                y: 0, // 下
                x2: 0, // 左
                y2: 0, // 上
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgb(55,123,255)'
                  },
                  {
                    offset: 0,
                    color: 'rgb(73,186,255)'
                  }
                ]
              }
            },
            // name的样式
            label: {
              show: true,
              position: [0, -18],
              rich: {
                a: {
                  fontSize: 14,
                  color: '#000',
                  align: 'center',
                  fontWeight:500,
                  verticalAlign: 'middle'
                }
              },
              formatter: params => {
                return '{a|' + params.name + '}'
              }
            },
            backgroundStyle: {
              color: 'rgb(214,230,252)',
              borderRadius: 12
            }
          }
        ]
      };
      myBottomChart.setOption(option)
    }
  },
  mounted() {
    this.initJingJiChart()
  }
}
</script>
  
<style scoped></style>